@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
<style>
    html, body {
        background-color: whitesmoke
    }

    .layui-fluid {
        margin-top: 15px;
    }

    .content {
        min-height: 796px;
    }

    .nav {
        text-align: center;
    }

        .nav button {
            margin-bottom: 3px;
            width: 100%;
            margin-top: 3px;
            margin-bottom: 3px;
            border-radius: 1px;
        }

            .nav button:hover {
                background-color: #5FB878;
                border: 1px solid #5FB878;
                color: white;
            }

    .layui-card-body .layui-btn + .layui-btn {
        margin-left: 0px;
    }

    .code-show {
        min-height: 454px;
    }

    .js-show {
        min-height: 200px;
    }
</style>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this">表单代码生成</li>
        <li>表格</li>
        <li>其它</li>
        <li>其它</li>
        <li>其它</li>
    </ul>
    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            <div class="layui-fluid">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-md1">
                        <div class="layui-card nav click-but">
                            <div class="layui-card-header">长</div>
                            <div class="layui-card-body">
                                <button class="layui-btn layui-btn-sm" plain data-size="block" data-type="text">输入框</button>
                                <button class="layui-btn layui-btn-sm" plain data-size="block" data-type="password">密码框</button>
                                <button class="layui-btn layui-btn-sm" plain data-size="block" data-type="select">选择框</button>
                                <button class="layui-btn layui-btn-sm" plain data-size="block" data-type="checkbox_a">复选框</button>
                                <button class="layui-btn layui-btn-sm" plain data-size="block" data-type="checkbox_b">开关</button>
                                <button class="layui-btn layui-btn-sm" plain data-size="block" data-type="radio">单选框</button>
                                <button class="layui-btn layui-btn-sm" plain data-size="block" data-type="textarea">文本域</button>
                                <button class="layui-btn layui-btn-sm" plain data-size="block" data-type="submit">提交</button>
                            </div>
                        </div>
                        <div class="layui-card nav">
                            <div class="layui-card-header">短</div>
                            <div class="layui-card-body">
                                <button class="layui-btn layui-btn-sm" plain data-size="inline" data-type="text">输入框</button>
                                <button class="layui-btn layui-btn-sm" plain data-size="inline" data-type="password">密码框</button>
                                <button class="layui-btn layui-btn-sm" plain data-size="inline" data-type="select">选择框</button>
                                <button class="layui-btn layui-btn-sm" plain data-size="inline" data-type="checkbox_a">复选框</button>
                                <button class="layui-btn layui-btn-sm" plain data-size="inline" data-type="checkbox_b">开关</button>
                                <button class="layui-btn layui-btn-sm" plain data-size="inline" data-type="radio">单选框</button>
                                <button class="layui-btn layui-btn-sm" plain data-size="inline" data-type="textarea">文本域</button>
                                <button class="layui-btn layui-btn-sm" plain data-size="block" data-type="submit">提交</button>
                            </div>
                        </div>
                        <div class="layui-card nav">
                            <div class="layui-card-body">
                                <button class="layui-btn layui-btn-danger layui-btn-sm del-form" data-type="del"> <i class="layui-icon">&#xe640;</i></button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md5">
                        <div class="layui-card content">
                            <div class="layui-card-header">
                                view
                            </div>
                            <div class="layui-card-body code">
                                <form class="layui-form" action="" onsubmit="return false">
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card r-code-html">
                            <div class="layui-card-header">html</div>
                            <div class="layui-card-body">
                                <textarea name="" class="layui-textarea code-show"></textarea>
                            </div>
                        </div>
                        <div class="layui-card r-code-js">
                            <div class="layui-card-header">code</div>
                            <div class="layui-card-body">
                                <textarea name="" class="layui-textarea js-show"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-tab-item">内容2</div>
        <div class="layui-tab-item">内容3</div>
        <div class="layui-tab-item">内容4</div>
        <div class="layui-tab-item">内容5</div>
    </div>
</div>

@section Scripts{
    <script>
        layui.use('design');
    </script>
} 